<template>
	<view class="body">
		<view class="top">
			<headerTwo ref="header" :isLoading="isLoading" @changeIndex="changeHeaderIndex" @dateConfirm="$u.debounce(dateConfirm, 500)" @refresh="$u.debounce(refresh,500)">
			</headerTwo>
			<view class="search">
				<u-search placeholder="搜索会员姓名、手机号" :show-action="false" shape="square" v-model="query.search" @change="$u.debounce(getSearch,500)"></u-search>
			</view>
			<view class="screen">
				<!-- <view class="up_down mr" @click="memberShow = true">
					<view class="title" :style="{color:!query.card?'#333333':'#73F0EA'}">
						{{!query.card?'会员卡':memberParams[query.card]}}
					</view>
					<u-icon :name="!memberShow?'arrow-down':'arrow-up'" color="#999999" size="14"></u-icon>
				</view> -->
				<view class="up_down flex"  @click="classShow = true">
					<view class="title" :style="{color:!query.course?'#333333':'#73F0EA'}">
						{{!query.course?'课程':classParams[query.course]}}
					</view>
					<u-icon :name="!classShow?'arrow-down':'arrow-up'" color="#999999" size="14"></u-icon>
				</view>
				<view class="up_down" @click="shopShow = true">
					<view class="title" :style="{color:query.shop_id == ''?'#333333':'#73F0EA'}">
						{{query.shop_id == ''?'门店':shopParams[shopIndex].shop_name}}
					</view>
					<u-icon :name="!shopShow?'arrow-down':'arrow-up'" color="#999999" size="14"></u-icon>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="scrolltolower">
			<view class="comlum_Y" v-if="list.length">
				<view v-for="(item,index) in list" :key="index" class="Item">
					<view class="top">
						<view class="left">
							{{item.open_date}}
						</view>
						<view class="right">
							{{item.shop_name}}
						</view>
					</view>
					<view class="center" >
						<image :src="item.avatar" mode="aspectFill" class="img" @click.stop="$PREVIEW_IMAGE(item.avatar)"></image>
						<view class="center_vi" @click.stop="$ROUTELINK('member/deatil?user_id=' + item.user_id)">
							<view class="comlum_cen">
								<view class="first">
									<view class="name_box">
										{{item.username}}
									</view>
									<image :src="item.gender?$IMG_URL('/static/test/boylogo.png'):$IMG_URL('/static/test/girlLogo.png')"
										mode="aspectFill" class="logo"></image>
									<text class="size3">{{item.user_str}}</text>
								</view>
								<view class="center_socund">
									<image :src="$IMG_URL('/static/test/phone.png')" mode="aspectFill" class="phone"></image>
									<text class="size2">{{item.mobile}}</text>
								</view>
								<view class="center_three">
									{{item.remark}}
								</view>
							</view>
							<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
						</view>
					</view>
					<view class="footsc">
						<view class="foot_Item width1">
							<view class="size4">
								总消费(元)
							</view>
							<view class="size5">
								{{item.consume}}
							</view>
						</view>
						<view class="foot_Item width2">
							<view class="size4">
								卡剩余(天)
							</view>
							<view class="size5">
								{{item.card_day}}
							</view>
						</view>
						<view class="foot_Item">
							<view class="size4">
								私教课剩余(节)
							</view>
							<view class="size5">
								{{item.class_num}}
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<empty v-else :content="'我的学员'"></empty>
		</scroll-view>
		<Loading v-if="isLoading" :logo="$IMG_URL('/static/newVersion/login3.png')" color="#4ECDC4" :speed="1000"
			:bounceHeight="50" text="数据加载中" />
		<u-picker  v-model="memberShow" mode="selector" :range="memberParams" :customTimeTag="true" :title="'会员卡'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeMember"></u-picker>
		<u-picker  v-model="classShow" mode="selector" :range="memberParams" :customTimeTag="true" :title="'课程'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeClass"></u-picker>
		<u-picker  v-model="shopShow" mode="selector" :range="shopParams" range-key="shop_name" :customTimeTag="true" :title="'门店'"
			:popupheight="'786rpx'" :borderRadius="16" @confirm="changeShop"></u-picker>
	</view>
</template>

<script>
	
	import{
		shopList,
		coachmemberList
	} from '@/api/coach.js'
	import headerTwo from './components/header2.vue'
	import empty from '@/components/empty.vue'
	export default {
		components: {
			headerTwo,
			empty
		},
		data() {
			return {
				isLoading: false,
				shopIndex:null,
				query:{
					shop_id:'',
					search:'',
					card:0,
					course:0,
					date_form:'',
					date:'',
					page:1
				},
				shopQuery:{
					page:1
				},
				memberParams:['全部','使用中', '已到期'],
				shopParams:['全部','使用中', '已到期'],
				classParams:['全部','有课程', '无课程'],
				memberShow: false,
				classShow: false,
				shopShow: false,
				list:[]
			}
		},
		onLoad() {
			this.getshopList()
			this.getcoachmemberList()
		},
		methods: {
			scrolltolower(){
				this.query.page++
				this.getcoachmemberList()
			},
			getSearch(){
				this.list = []
				this.query.page = 1
				this.getcoachmemberList()
			},
			getcoachmemberList(){
				if (this.isLoading) {
					console.log('请求未完成，请稍后');
					return;
				}
				this.isLoading = true;
				coachmemberList(this.query).then(({data:res})=>{
					if (res.code == 1) {
						const list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.list = this.list.concat(res.data.list)
						}
					
						console.log('list', this.list);
					}
				}).finally(() => {
					this.isLoading = false
				})
			},
			getshopList(){
				shopList(this.shopQuery).then(({data:res})=>{
					console.log('res', res);
					if(res.code == 1){
						this.shopParams = res.data
					}
				})
			},
			refresh() {
				// 显示加载动画
				this.isLoading = true;
			
				// 重置查询参数和列表数据
				this.query.page = 1;
				this.list = [];
			
				// 模拟请求数据（在实际应用中，你应该使用真实的网络请求）
				setTimeout(() => {
					// 请求完成后隐藏加载动画
					this.isLoading = false;
			
					this.getcoachmemberList()
				}, 1500); // 模拟请求延迟1.5秒
			},
			dateConfirm(e, data) {
				console.log('e321', data);
				this.query.date = data
				this.query.page = 1
				this.list = []
				this.getcoachmemberList()

			},
			changeHeaderIndex(e) {
				this.query.date_form = e == 0 ? 'day' : e == 1 ? 'month' : 'year'
				this.query.date = this.$refs.header.day
				console.log('form', this.query.date_form);
				this.query.page = 1
				this.list = []
				this.getcoachmemberList()
			},
			changeMember(e){
				this.query.card = e[0]
				this.query.page = 1
				this.list = []
				this.getcoachmemberList()
			},
			changeClass(e){
				this.query.course = e[0]
				this.query.page = 1
				this.list = []
				this.getcoachmemberList()
			},
			changeShop(e){
				const index = e[0]
				this.shopIndex = index
				this.query.shop_id = this.shopParams[index].shop_id
				this.query.page = 1
				this.list = []
				this.getcoachmemberList()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;

	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top {
		width: 750rpx;
		height: 274rpx;
		padding: 24rpx 0;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;

		.search {
			width: 100%;
			padding: 24rpx;
		}

		.screen {
			width: 100%;
			display: flex;
			flex-direction: row;
			padding: 0 24rpx;

			.mr {
				margin-right: 106rpx;
			}

			.flex {
				flex: 1;
			}

			.up_down {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #333333;
					margin-right: 7rpx;
				}
			}
		}
	}
	.scroll-view{
		height: 80vh;
	}
	.comlum_Y{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 24rpx;
		.Item{
			width: 702rpx;
			height: 412rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 24rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			.top{
				width: 100%;
				height: 64rpx;
				display: flex;
				flex-direction: row;
				border-bottom: 1rpx solid #E9E9E9;
				.left{
					flex: 1;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}
				.right{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #666666;
				}
			}
			.center{
				display: flex;
				flex-direction: row;
				width: 100%;
				border-bottom: 1rpx solid #e9e9e9;
				padding: 25rpx 0 22rpx;
				.img{
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					margin-right: 19rpx;
				}
				.center_vi{
					display: flex;
					flex-direction: row;
					align-items: center;
					flex: 1;
					.comlum_cen{
						display: flex;
						flex-direction: column;
						flex: 1;
						.first{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-bottom: 12rpx;
							.name_box{
								margin-right: 16rpx;
								font-size: 32rpx;
								font-family: PingFang SC, PingFang SC-Bold;
								font-weight: 700;
								text-align: left;
								color: #333333;
							}
							.logo{
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}
							.size3{
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #000000;
							}
						}
						.center_socund{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-bottom: 12rpx;
							.phone{
								width: 20rpx;
								height: 30rpx;
								margin-right: 7rpx;
							}
							.size2{
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #666666;
							}
						}
						.center_three{
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
						}
					}
				}
			}
			
		}
	}
	.footsc{
		width: 100%;
		display: flex;
		flex-direction: row;
		padding-top: 26rpx;
		.width1{
			width: 274rpx;
		}
		.width2{
			flex: 1;
		}
		.foot_Item{
			display: flex;
			flex-direction: column;
			.size4{
				font-size: 24rpx;
				font-weight: 400;
				margin-bottom: 8rpx;
			}
			.size5{
				font-size: 36rpx;
				font-weight: 700;
				color: #000000;
			}
		}
	}
</style>